<template>
  <div class="home">
    <div class="first">
      <div
        class="first-list"
        v-for="(item, index) in 3"
        :key="index"
        :style="{ background: index <= 1 ? '#ffffff' : '' }"
      >
        <div class="list" v-if="index <= 1">
          <div
            class="list-top"
            v-if="index <= 1"
            :style="{
              background: index == 0 ? '#2588FA' : index == 1 ? '#F58F18' : '',
            }"
          >
            {{ index == 0 ? "一般账号" : index == 1 ? "待结算账户" : "" }}
          </div>

          <div class="list-block" v-if="index <= 1">
            <div class="block-title">可提现金额</div>
            <div
              class="block-text"
              :style="{ color: index == 1 ? '#F58F18' : '' }"
            >
              ¥
              {{ index == 0 ? ordinaryObj.cashAmount : settledObj.cashAmount }}
            </div>
            <div class="block-array">
              <div class="array" v-for="(info, num) in 3" :key="num">
                <div class="array-left">
                  {{
                    num == 0
                      ? "不可提现金额"
                      : num == 1
                      ? "冻结可提现金额"
                      : "冻结不可提现金额"
                  }}
                </div>
                <div class="array-right">
                  ¥
                  {{
                    index == 0
                      ? num == 0
                        ? ordinaryObj.uncashAmount
                        : num == 1
                        ? ordinaryObj.freezeCashAmount
                        : num == 2
                        ? ordinaryObj.freezeUncashAmount
                        : ""
                      : num == 0
                      ? settledObj.uncashAmount
                      : num == 1
                      ? settledObj.freezeCashAmount
                      : num == 2
                      ? settledObj.freezeUncashAmount
                      : ""
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="back" v-if="index == 2">
          <img class="back-img" src="../../assets/index/icon-6.png" alt="" />
          <div class="back-block">
            <div class="block-title">钱包账户总余额</div>
            <div class="block-text">¥ {{ firstAccountObj.walletBalance }}</div>

            <div class="block-display">
              <div class="display-list">
                <div class="list-div">
                  <div class="list-title">平台转钱包累计金额</div>
                  <div class="list-price">
                    ¥ {{ firstAccountObj.totalWEnter }}
                  </div>
                </div>

                <div class="list-div1">
                  <div class="list-title">平台钱包累计提现金额</div>
                  <div class="list-price">
                    ¥ {{ firstAccountObj.totalWithdrawal }}
                  </div>
                </div>
              </div>
              <div class="display-list">
                <div class="list-div">
                  <div class="list-title">今日平台转钱包金额</div>
                  <div class="list-price">
                    ¥ {{ firstAccountObj.todayWEnter }}
                  </div>
                </div>

                <div class="list-div1">
                  <div class="list-title">今日钱包总提现金额</div>
                  <div class="list-price">
                    ¥ {{ firstAccountObj.todayWithdrawal }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="second">
      <div class="second-top">
        <div class="second-top-left">
          <div class="left-title">当日收益（元）</div>
          <div class="left-text">¥ {{ homeMarkeobj.todayEnter }}</div>
        </div>
        <div class="second-top-right">
          <!-- <el-select
            v-model="pitcValue"
            placeholder="近30天"
            style="margin-right: 20px"
          >
            <el-option
              v-for="item in pitcOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->

          <el-date-picker
            v-model="pitchMonth"
            type="month"
            placeholder="选择月"
            @change="numpeopleBtn"
            value-format="yyyy-MM"
            :disabled="homeShow == false? true: false"
          >
          </el-date-picker>
        </div>
      </div>

      <div class="second-center">
        <div class="second-center-left">
          <div id="chartMarket" style="width: 84rem; height: 350px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDateTime } from "../../utils/time"; // 时间戳转化
import {
  getStatistics,
  getTrendBymMonth,
  gettrendBymYear,
} from "../../api/home";
export default {
  data() {
    return {
      //----------第一区域
      firstAccountObj: {},
      // 一般账户
      ordinaryObj: {},
      // 待结算账户
      settledObj: {},
      //---------------------
      // 第二区域 获取选中月份
      pitchMonth: "",
      //---- 近多少天
      pitcValue: "",
      pitcOptions: [],

      //----------测试
      homeMarkeobj: {},
      homeShow: false,
    };
  },
  created() {
    //---------获取第一区域
    this.getStatisticsMet();

    // 第二区域 每日新增人数 获取月份
    this.pitchMonth = getDateTime("month");
    // 获取销售额曲上线
    this.getTrendBymMonthMet();
    setTimeout(() => {
      this.homeShow = this.$store.state.pageFunctionShow;
    }, 1000);
  },
  methods: {
    getStatisticsMet() {
      let params = {};

      getStatistics(params).then((res) => {
        if (res.resultStatus == true) {
          this.firstAccountObj = res.resultData;
          res.resultData.accountList.forEach((item, index) => {
            if (item.accountType == 1) {
              this.ordinaryObj = item;
            } else {
              this.settledObj = item;
            }
          });
        }
      });
    },

    //--------收益
    getTrendBymMonthMet() {
      let params = {
        month: this.pitchMonth,
      };

      getTrendBymMonth(params).then((res) => {
        if (res.resultStatus == true) {
          this.homeMarkeobj = res.resultData;
          //  获取日期对照表    // 获取日期数组
          let userNewly = res.resultData.statisticsList;
          // 当前月份时间日期
          let userTime = [];
          let userPeople = [];
          userNewly.forEach((item, index) => {
            userTime.push(item.time.slice(-2));
            userPeople.push(item.enum);
          });

          this.$nextTick(() => {
            this.getMarketpicture(userTime, userPeople);
          });
        }
      });
    },

    // 第二区域 点击获取月份
    numpeopleBtn(val) {
      console.log('点击触发')

      if (val) {
        var year = val.split("-")[0];
        var month = val.split("-")[1];
        this.pitchMonth = year + "-" + month;

        this.getTrendBymMonthMet();
      }
    },
    // 第三区域
    getMarketpicture(time, people) {
      var myChart = this.$echarts.init(document.getElementById("chartMarket"));
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
          },
          calculable: true,
          xAxis: [
            {
              name: "",
              type: "category",
              boundaryGap: false,
              data: time,
              axisLine: {
                show: true,
                // 坐标轴线
                lineStyle: {
                  color: "#999999",
                },
              },
              axisTick: {
                //刻度线
                show: false,
                lineStyle: {
                  color: "#999999",
                },
              },
            },
          ],
          grid: {
            left: "4%",
            right: "4%",
            top: "60px",
            bottom: "20%",
          },
          yAxis: [
            {
              name: "元",
              type: "value",
              axisLabel: {
                formatter: "{value}",
              },
              splitLine: {
                show: false, //不显示分隔线
              },
              minInterval: 1,
            },
          ],
          color: ["#2588FA"],
          legend: {
            data: ["进账(元)"],
            bottom: 0,
          },
          series: [
            {
              symbol: "none",
              name: "进账(元)",
              type: "line",
              color: ["#2588FA"],
              smooth: true,
              data: people,
              areaStyle: {},
              itemStyle: {
                normal: {
                  color: "rgba(37,136,250, .4)",
                  lineStyle: {
                    width: 3, //设置线条粗细
                    shadowOffsetX: 0, // 折线的X偏移
                    shadowColor: "rgba(41, 214, 71, 1)", //折线颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .first {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .first-list {
      width: calc((100% / 3) - 15px);
      box-shadow: 0px 2px 10px 0px rgba(71, 75, 75, 0.06);
      border-radius: 10px;
      position: relative;
      height: 370px;

      .list {
        margin-top: 20px;

        .list-top {
          width: 130px;
          height: 39px;
          border-radius: 0px 100px 100px 0px;
          display: flex;
          align-items: center;
          justify-content: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 18px;
          color: #ffffff;
        }

        .list-block {
          margin-top: 18px;
          padding: 0 20px;
          box-sizing: border-box;

          .block-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #292929;
            margin-bottom: 7px;
            text-align: center;
          }

          .block-text {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 36px;
            color: #2588fa;
            text-align: center;
          }
          .block-array {
            margin-top: 27px;

            .array {
              height: 52px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #f0f0f0;

              .array-left {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #949494;
              }

              .array-right {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 24px;
                color: #292929;
              }
            }

            .array:first-child {
              border-top: 1px solid #f0f0f0;
            }
          }
        }
      }

      .back {
        width: 100%;
        height: 100%;
        position: relative;

        .back-img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
        }

        .back-block {
          padding: 30px 0;
          box-sizing: border-box;
          position: relative;

          .block-title {
            margin-left: 34px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
          }

          .block-text {
            margin-left: 34px;
            margin-top: 6px;
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 36px;
            color: #ffffff;
          }

          .block-display {
            margin-top: 50px;
            display: flex;
            .display-list {
              width: 50%;
              text-align: center;

              .list-div,
              .list-div1 {
                .list-title {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 14px;
                  color: #ffffff;
                }

                .list-price {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 24px;
                  color: #ffffff;
                  margin-top: 5px;
                }
              }

              .list-div1 {
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
  }

  .second {
    padding: 24px;
    box-sizing: border-box;
    margin-top: 24px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px #edeff7;
    border-radius: 10px;
    .second-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .second-top-left {
        display: flex;
        align-items: center;

        .left-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
        }

        .left-text {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 22px;
          color: #999999;
        }
      }
      .second-top-right {
        display: flex;

        /deep/ .el-date-editor.el-input {
          width: 160px;
        }

        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 50px;
          width: 160px;
          height: 38px;
          background: #ffffff;
          border-radius: 2px;
        }

        /deep/ .el-input__inner {
          width: 160px;
          height: 38px;
          line-height: 38px;
        }
      }
    }

    .second-center {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;

      .second-center-left {
        width: 1420px !important;
        height: 100%;
      }
    }
  }
}
</style>